<!-- Created by henian.xu on 2018/11/8. -->

<template>
    <ul :class="classes">
        <li
            :class="['menu-item', currentId===item.id?'extend':'',{active:value===item.id}]"
            v-for="item in options"
            :key="item.id">
            <div
                class="menu-item-label"
                @click="onItem(item)">
                <span>
                    <!--<i class="f-icon">&#xf009;</i>-->
                    {{ item.name }} <!-- - #{{ item.id }}-->
                </span>
                <template v-if="item.children && item.children.length">
                    <i
                        class="f-icon fn-right"
                        v-if="currentId===item.id">&#xf106;</i>
                    <i
                        class="f-icon fn-right"
                        v-else>&#xf107;</i>
                </template>
            </div>

            <ul
                class="menu-submenu"
                v-if="item.children && item.children.length">
                <li
                    :class="['menu-item',{active:value===child.id}]"
                    v-for="child in item.children"
                    :key="child.id">
                    <div
                        style="padding-left: 24px;"
                        class="menu-item-label"
                        @click="onItem(child)">
                        <!--<i class="f-icon">&#xf009;</i>-->
                        {{ child.name }} <!-- - #{{ item.id }}-->
                    </div>
                </li>
            </ul>
        </li>
    </ul>
</template>

<script>
export default {
    name: 'XMenu',
    data() {
        return {
            currentId: 0,
        };
    },
    props: {
        value: {
            type: [String, Number],
            default: '',
        },
        data: {
            type: Array,
            required: true,
            default() {
                return [];
            },
        },
        float: {
            type: Boolean,
            default: false,
        },
        nav: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        classes() {
            return [
                'menu',
                {
                    'menu-float': this.float,
                },
                {
                    'menu-nav': this.nav,
                },
            ];
        },
        options() {
            return this.data.map(item => {
                if (typeof item === 'string' || typeof item === 'number') {
                    return {
                        id: item,
                        name: item,
                    };
                } else if (Array.isArray(item)) {
                    console.warn('选项不能是数组');
                    return {};
                } else if (typeof item === 'object') {
                    return item;
                }
            });
        },
        optionsMap() {
            const flatten = arr =>
                arr.reduce((flat, next) => {
                    flat = flat.concat(next);
                    if (next.children) {
                        flat = flat.concat(flatten(next.children));
                    }
                    return flat;
                }, []);
            return flatten(this.options).reduce((p, n) => ((p[n.id] = n), p), {});
        },
    },
    watch: {
        value: {
            handler(val) {
                if (!val || this.currentId) return;
                const option = this.optionsMap[val];
                if (!option || !option.idPath) return;
                const idPathArr = option.idPath.replace(/(^>*)|(>*$)/g, '').split('>');
                if (!idPathArr.length) return;
                this.currentId = +idPathArr[0];
            },
            immediate: process.client,
        },
    },
    methods: {
        onItem(item) {
            if (item.children && item.children.length) {
                if (this.currentId === item.id) {
                    this.currentId = null;
                } else {
                    this.currentId = item.id;
                }
                return;
            }
            this.$emit('clickItem', item);
            this.$emit('input', item.id);
        },
    },
};
</script>

<style lang="scss">
@import '~/assets/style/_index.scss';

$className: $pf + menu;
$itemHeight: 40px;
.#{$className} {
    //display: inline-block;
    //min-width: 100%;
    list-style: none;
    padding-left: 0;

    // 选项
    &-item {
        //display: inline-block;
        //min-width: 100%;
        &-label {
            //display: inline-block;
            //min-width: 100%;
            display: block;
            height: $itemHeight;
            line-height: $itemHeight;
            padding: 0 $padding;
            user-select: none;
            cursor: pointer;
            > span {
                display: inline-block;
                max-width: 100%;
                @include text-line(1); // white-space: nowrap; 在 display: inline-block 下会出现间隔
            }
            &:hover {
                // background-color: mix($color-main, #fff, 10%);
                color: $color-main;
            }
        }
        &.active {
            > .#{$className}-item-label {
                background-color: mix($color-main, #fff, 70%);
                color: #fff;
            }
        }
    }

    // 子菜单
    &-submenu {
        display: none;
        list-style: none;
        //padding-left: $padding;

        &-label {
            position: relative;
            padding-right: $padding + 10px;
            &:after {
                content: '\f107';
                @include make-icon;
                line-height: inherit;
                display: inline-block;
                position: absolute;
                top: 0;
                right: $padding;
            }
        }
    }

    // .x-menu-submenu-label 展开时图标向上
    &-item.extend {
        > .#{$className}-submenu {
            display: block;

            &-label {
                &:after {
                    content: '\f106';
                }
            }
        }
    }

    // 浮动
    &-nav,
    &-float {
        display: inline-block;
        @include clearfix;
        .#{$className} {
            // 选项
            &-item {
                position: relative;
                // .x-menu-submenu-label 展开时图标向左
                &.extend {
                    > .#{$className}-submenu {
                        display: inline-block;
                        &-label {
                            &:after {
                                content: '\f104';
                            }
                        }
                    }
                }
            }

            // 子菜单
            &-submenu {
                position: absolute;
                top: 0;
                left: 100%;
                border: 1px solid $gray2;

                &-label:after {
                    content: '\f105';
                }

                .#{$className}-item {
                    display: inline-block;
                    min-width: 100%;
                    &-label {
                        display: inline-block;
                        min-width: 100%;
                        > span {
                            max-width: inherit;
                            min-width: 100%;
                            overflow: visible;
                        }
                    }
                }
            }
        }
    }

    // 导航
    &-nav {
        display: block;
        > .#{$className} {
            &-item {
                float: left;
                > .#{$className}-submenu {
                    top: 100%;
                    left: 0;
                    &-label:after {
                        display: none;
                    }
                }
            }
        }
    }
}
</style>
